<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal="false" >
    <el-form :model="formInline" class="form" label-position="right" label-width="140px" size="small" :rules="rules" ref="formInline">
      <div style="display:flex">
        <div class="box_left">
          <el-form-item label="设备注册代码:">
            <el-input v-model="formInline.eleCode" :disabled="disable"></el-input>
          </el-form-item>
          <el-form-item label="管理单位" label-width="100px" prop="manageOrgId">
            <el-select v-model="formInline.manageOrgId" placeholder="请选择" size='small' filterable  clearable>
              <el-option v-for="item in manangeOrgList" :key="item.id" :label="item.orgName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册登记机构名称:">
            <el-select v-model="formInline.regOrgName" :disabled="disable">
              <el-option label="鄂州市市场监督管理局" value="鄂州市市场监督管理局"></el-option>
              <el-option label="鄂城区市场监督管理局" value="鄂城区市场监督管理局"></el-option>
              <el-option label="华容区市场监督管理局" value="华容区市场监督管理局"></el-option>
              <el-option label="梁子湖区市场监督管理局" value="梁子湖区市场监督管理局"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电梯状态" label-width="100px" prop="eleStatus">
            <el-select v-model="formInline.eleStatus" placeholder="请选择" size='small' clearable>
              <el-option v-for="item in eleStatusList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="963333编码:">
            <el-input v-model="formInline.eleFlag" :disabled="disable"></el-input>
          </el-form-item>
          <el-form-item label="使用单位" label-width="100px" prop="useOrgId">
            <el-select v-model="formInline.useOrgId" placeholder="请选择" size='small' filterable  clearable allow-create>
              <el-option v-for="item in useOrgList" :key="item.id" :label="item.orgName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制造商" label-width="100px" prop="eleManufacturer">
            <el-select v-model="formInline.eleManufacturer" placeholder="请选择" size='small' filterable  clearable>
              <el-option v-for="item in manufacturerOrgList" :key="item.id" :label="item.manufacturerName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下次检验日期" label-width="100px" prop="eleNextChecktime">
            <el-date-picker v-model="formInline.eleNextChecktime" type="date" placeholder="选择日期" size='small' value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="电梯安装地址：">
            <el-input v-model="formInline.eleUseCommunity" :disabled="disable"></el-input>
          </el-form-item>
          <el-form-item label="地理信息(经纬度[30.23,114.25])：">
            <el-input v-model="formInline.eleLocation" :disabled="disable"></el-input>
          </el-form-item>
          <el-form-item label="开始楼层：">
            <el-input v-model="formInline.startFloor" :disabled="disable"></el-input>
          </el-form-item>
        </div>

        <div class="box_right">
          <el-form-item label="(新)设备注册代码：">
            <el-input v-model="formInline.equNo" :disabled="disable"></el-input>
          </el-form-item>
          <el-form-item label="登记证号：">
            <el-input v-model="formInline.eleCertNo" :disabled="disable"></el-input>
          </el-form-item>
          <el-form-item label="电梯类型" label-width="100px">
            <el-select v-model="formInline.eleTypeId" placeholder="请选择" size='small' clearable>
              <el-option v-for="item in eleTypeList" :key="item.id" :label="item.typeName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="规格型号：">
            <el-input v-model="formInline.eleSpecification" :disabled="disable"></el-input>
          </el-form-item>
          <el-form-item label="维保单位" label-width="100px" prop="maintOrgId">
            <el-select v-model="formInline.maintOrgId" placeholder="请选择" size='small' filterable  clearable allow-create>
              <el-option v-for="item in maintOrgList" :key="item.id" :label="item.orgName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检验机构名称：">
            <el-input v-model="formInline.checkOrgName" :disabled="disable" ></el-input>
          </el-form-item>
          <el-form-item label="出厂编号：">
            <el-input v-model="formInline.factoryNo" :disabled="disable"></el-input>
          </el-form-item>
          <el-form-item label="所属区域代码：">
            <el-input v-model="formInline.eleAreaCode" :disabled="disable"></el-input>
<!--            <el-cascader-->
<!--              v-model="formInline.eleAreaCode"-->
<!--              :options="options"-->
<!--              :props="{ lazy:true,-->
<!--                            lazyLoad:this.lazyLoad-->
<!--                          }"-->
<!--              clearable-->
<!--            />-->
          </el-form-item>
          <el-form-item label="楼栋内部编号：">
            <el-input v-model="formInline.eleUseInnerno" :disabled="disable"></el-input>
          </el-form-item>
          <el-form-item label="是否有地下室：">
            <el-switch
              v-model="formInline.hasUnder"
              active-color="#13ce66"
              inactive-color="#cccc"
              active-value="1"
              inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item label="最高楼层：">
            <el-input v-model="formInline.endFloor" :disabled="disable"></el-input>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" @click="getEdit('formInline')" size='small' v-if="title=='修改'">修改保存</el-button>
      <el-button type="success" @click="getAdd('formInline')" size='small' v-if="title=='添加'">新增保存</el-button>
      <el-button size='small' @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getAdminManageOrgInfoList,getAdminEleInfo,getAdmineleTypeList, getAdminmanufacturerList,addAdminEleInfo, editAdminEleInfo } from '@/api/elevator'
import {getadminOrgInfoList} from "@/api/useOrgManage";
// import { getAreaList,getAreaTree } from '@/api/orglist'
export default {
  data () {
    return {
      certFileName: null,
      loading: false,
      eleTypeList: [],
      useOrgList: [],
      maintOrgList: [],
      manangeOrgList:[],
      manufacturerOrgList:[],
      eleStatusList:[{id:"0",name:"正常"},{id:"1",name:"应检"},{id:"2",name:"检验"}
        ,{id:"3",name:"超期"},{id:"4",name:"待复查"},{id:"5",name:"报停"},{id:"6",name:"封停"}
        ,{id:"7",name:"报废"},{id:"8",name:"转卖"},{id:"9",name:"延期"},{id:"10",name:"监察"}],
      disable: false,
      title: '',
      dialogVisible: false,
      formInline: {
        checkOrgName:"湖北特种设备检验检测研究院鄂州分院"
      },
      options:[],
      fileList: [],
      // formLabelWidth: '100px',
      rules: {}
    }
  },
  mounted () {
    this.getMaintOrgList()
    this.getEleTypeList()
    this.getUseOrgList()
    this.getManangeOrgList()
    this.getmanufacturerOrgList()
  },
  methods: {
    // async lazyLoad(node,resolve){
    //   let level=node.level
    //   let result=[];
    //   let query={
    //     areaLevel:level+1
    //   }
    //   switch (level) {
    //     case 0:
    //       if(node.child&&node.child.length>0) return
    //       let res=await getAreaList(query)
    //       if (res.data.code == '200') {
    //         res.data.data.map((item)=>{
    //           let obj = {
    //             value: item.areaCode,
    //             label: item.areaName,
    //             leaf: false
    //           }
    //           result.push(obj);
    //
    //         })
    //       }
    //       break;
    //     case 1:
    //       if(node.child&&node.child.length>0) return
    //       query={
    //         areaLevel:level+1,
    //         areaCode:node.data.value
    //       }
    //       let city=await getAreaList(query)
    //       if (city.data.code == '200') {
    //         city.data.data.map((item)=>{
    //           let obj = {
    //             value: item.areaCode,
    //             label: item.areaName,
    //             leaf: false
    //           }
    //           result.push(obj);
    //         })
    //       }
    //       break;
    //     case 2:
    //       if(node.child&&node.child.length>0) return
    //       query={
    //         areaLevel:level+1,
    //         areaCode:node.data.value
    //       }
    //       let area=await getAreaList(query)
    //       if (area.data.code == '200') {
    //         area.data.data.map((item)=>{
    //           let obj = {
    //             value: item.areaCode,
    //             label: item.areaName,
    //             leaf: true
    //           }
    //           result.push(obj);
    //         })
    //       }
    //       break;
    //     default:
    //       result = []
    //       break;
    //   }
    //
    //   resolve(result)
    //
    // },
    handleClick () {
      this.fileList1 = [],
        this.formInline.certFilepath = ''
      this.certFileName = null
    },
    getEdit (formInline) {
      let useOrgName=this.formInline.useOrgId
      if (typeof useOrgName === 'string') {
        this.formInline.useOrgId=''
        this.formInline.useOrgName=useOrgName
      }
      this.$refs[formInline].validate((valid) => {
        if (valid) {
          editAdminEleInfo(this.formInline).then(res => {
            if (res.data.code == '200') {
              this.handleClose()
              this.$parent.gettableData()
            } else {
              this.$message({
                type: 'warning',
                message: res.data.msg
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })

    },
    getAdd (formInline) {
      let useOrgName=this.formInline.useOrgId
      if (typeof useOrgName === 'string') {
        this.formInline.useOrgId=''
        this.formInline.useOrgName=useOrgName
      }
      this.$refs[formInline].validate((valid) => {
        if (valid) {
          addAdminEleInfo(this.formInline).then(res => {
            if (res.data.code == '200') {
              this.handleClose()
              this.$parent.gettableData()
            } else {
              this.$message({
                type: 'warning',
                message: res.data.msg
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose () {
      this.$refs.formInline.resetFields()
      this.formInline = {},
        this.fileList = []
      this.disable = false
      this.dialogVisible = false
      this.handleClick()
    },
    getEleInfo (id) {
      getAdminEleInfo(id).then(res => {
        if (res.data.code == '200') {
          this.formInline=res.data.data;
          // if(this.formInline.eleAreaCode){
          //   let query={
          //     areaLevel:3,
          //     areaCode:this.formInline.eleAreaCode
          //   }
          //   getAreaTree(query).then(res=>{
          //     if (res.data.code == '200') {
          //       this.options=res.data.data
          //     }
          //   })
          // }
        }
      })
    },
    getmanufacturerOrgList () {
      const param={};
      getAdminmanufacturerList(param).then(res => {
        if (res.data.code == 200) {
          this.manufacturerOrgList = res.data.data
        }
      })
    },
    getUseOrgList () {
      const param={orgType:1};
      getadminOrgInfoList(param).then(res => {
        if (res.data.code == 200) {
          this.useOrgList = res.data.data
        }
      })
    },
    getMaintOrgList () {
      const param={orgType:0};
      getadminOrgInfoList(param).then(res => {
        if (res.data.code == 200) {
          this.maintOrgList = res.data.data
        }
      })
    },
    getManangeOrgList () {
      const param={};
      getAdminManageOrgInfoList(param).then(res => {
        if (res.data.code == 200) {
          this.manangeOrgList = res.data.data
        }
      })
    },
    getEleTypeList () {
      const param={};
      getAdmineleTypeList(param).then(res => {
        if (res.data.code == 200) {
          this.eleTypeList = res.data.data
        }
      })
    },
  }
}

</script>
<style lang="less" scoped>
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.box-card {
  margin: 0 15px 15px 15px;
  .clearfix {
    font-weight: bold;
  }
  .box_left {
    width: 60%;
  }
  .right {
    width: 40%;
  }
  .btn {
    display: flex;
    justify-content: center;
  }
}
::v-deep .delUploadColor {
  .el-upload--picture-card {
    display: none;
  }
  i.el-icon-plus {
    display: none;
  }
}
</style>
